<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="解读详情"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-20 pb-20" v-if="!loading">
					<view class="relative box-problem mb-20">
						<view class="flex flex-col absolute top-0 left-0 w-full h-full">
							<view class="flex-top"></view>
							<view class="flex-middle flex-1"></view>
							<view class="flex-bottom"></view>
						</view>
						<view class="relative top-0 z-10 p-20 px-30 pb-40">
							<view class="mt-20 problem">
								<text class="font-bold">问题：</text>
								<text>{{postDetail?.describe}}</text>
							</view>
							<view class="mt-20" v-if="postDetail?.replenishment">
								<text class="font-bold">补充说明：</text>
								<text>{{postDetail?.replenishment}}</text>
							</view>
							<template v-if="postDetail.posts == 1">
								<view class="mt-20">
									<text class="text-sm font-bold mb-20">您是否有不适感(可多选):</text>
									<uni-data-checkbox multiple v-model="addparme" :localdata="addparmeList"></uni-data-checkbox>
								</view>
							</template>
							<template v-if="postDetail.posts == 2">
								<view class="mt-20 flex">
									<view class="p-20 bg-[#BBE4FF] text-center rounded-full" @click="onAstrolabe">查看星盘</view>
								</view>
							</template>
							<view v-if="postDetail.posts == 3">
								<template v-if="postDetail.sdes == 1">
									<view class="mt-20 card-dashed flex justify-around p-20" v-if="cardList.length">
										<view class="flex flex-col justify-center items-center" v-for="(item, idx) in cardList" :key="idx">
											<image :src="item.tarot.front" mode="widthFix" v-if="item.dir == 0"></image>
											<image :src="item.tarot.back" mode="widthFix" v-else></image>
											<!-- <text class="mt-10">{{item.tarot.name}}</text> -->
										</view>
									</view>
									<view class="flex justify-between items-center mt-20 px-50">
										<view class="flex items-center">
											<view class="box-year">2000年</view>
											<view class="box-birthday ml-10">龙</view>
											<view class="box-gender ml-10">女</view>
										</view>
										<view class="flex items-center">
											<view class="choose-num">14</view>
											<view class="choose-num ml-10">29</view>
											<view class="choose-num ml-10">57</view>
										</view>
									</view>
								</template>
								<template v-else>
									<view class="card-dashed flex justify-around p-20 mt-20">
										<view class="flex flex-col justify-center items-center" v-for="(item, idx) in cardList" :key="idx">
											<image :src="item.tarot.front" mode="widthFix" v-if="item.dir == 0"></image>
											<image :src="item.tarot.back" mode="widthFix" v-else></image>
											<!-- <text class="mt-10">{{item.tarot.name}}</text> -->
										</view>
									</view>
								</template>
							</view>
						</view>
					</view>
					<view class="flex mb-20">
						<view class="box-pay py-10 px-20 ml-10 rounded-full flex items-center">
							<text class="mr-10 text-pay">已支付</text>
							<view class="flex items-center px-20 py-10 rounded-full bg-white">
								<ImageBoxVue :src="postDetail?.paysts==0?'/static/icons/blue.png':'/static/icons/red.png'" width="28rpx"
									height="28rpx">
								</ImageBoxVue>
								<text class="ml-10">{{postDetail?.sinpay}}钻</text>
							</view>
						</view>
					</view>
					<view class="" v-for="(item, idx) in aanlist" :key="idx">
						<view class="flex items-start mt-20" v-if="item.details">
							<view class="w-80 h-80 rounded-full overflow-hidden">
								<ImageBoxVue :src="item.anchor.headimg"></ImageBoxVue>
							</view>
							<view class="box-msg w-[60%] p-20 bg-white rounded-lg ml-30">{{item.details}}</view>
						</view>
						<template v-if="item.voiceArr.length">
							<view class="flex items-start mt-20" v-for="(sound, index) in item.voiceArr" :key="index">
								<view class="w-80 h-80 rounded-full overflow-hidden">
									<ImageBoxVue :src="item.anchor.headimg"></ImageBoxVue>
								</view>
								<view class="flex items-center">
									<view class="box-msg w-228 p-20 bg-white rounded-lg ml-30">
										<view @click="playAudio(sound)"
											class="flex items-center justify-start bg-gradient-to-b from-[#94F2FF] to-[#34D3DD] rounded-full h-44 pl-10">
											<view class="icon-voice" v-if="sound.playing"></view>
											<ImageBoxVue src="/static/user/icon_voice3.png" width="28rpx" height="28rpx" v-else></ImageBoxVue>
											<text class="text-white ml-4">{{sound.time}}''</text>
										</view>
									</view>
								</view>
							</view>
						</template>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	import communityApi from '@/apis/apiList/communityApi';
	import postCompVue from '@/components/postComp.vue';
	import config from '../../config/index.js'
	import spread1 from './spread/spread1.vue';
	import spread2 from './spread/spread2.vue';
	import spread3 from './spread/spread3.vue';
	import spread4 from './spread/spread4.vue';
	import spread5 from './spread/spread5.vue';
	import spread6 from './spread/spread6.vue';
	import spread7 from './spread/spread7.vue';
	import spread8 from './spread/spread8.vue';
	import spread9 from './spread/spread9.vue';
	import spread10 from './spread/spread10.vue';
	import spread11 from './spread/spread11.vue';
	import spread12 from './spread/spread12.vue';
	import spread13 from './spread/spread13.vue';
	import spread14 from './spread/spread14.vue';
	import spread15 from './spread/spread15.vue';
	import spread16 from './spread/spread16.vue';

	const postId = ref("") // 帖子ID
	const postDetail = ref({}) // 帖子详情
	const loading = ref(false) // 加载中
	const showKeyWord = ref(false) // 是否显示关键词
	const isAch = ref(0)
	const cardList = ref([])
	const addparmeList = ref([])
	const addparme = computed(() => { // 不适感
		return postDetail.value.addparme ? postDetail.value.addparme.split(',') : []
	})
	const aanlist = ref([]) // 解读信息
	const playing = ref(false)
	const audioCtx = ref(null)
	onMounted(() => {
		addparmeList.value = uni.getStorageSync("addparme")
		addparmeList.value.map(item => {
			item.disable = true
		})
	})

	onLoad((option) => {
		postId.value = option.id;
		loading.value = true
		isAch.value = uni.getStorageSync('user').ach
	})

	onShow((option) => {
		getDetail()
	})

	const getDetail = () => {
		const opt = {
			id: postId.value,
			'member.id': uni.getStorageSync('user').id
		}
		loading.value = true
		communityApi.getPossInfobyPossid(opt).then(res => {
			if (res.data.aanlist) {
				res.data.aanlist.map(post => {
					if (post.sts == 1) {
						let arr = post.headimg ? post.headimg.split(',') : [];
						let vArr = []
						arr.map(item => {
							let a1 = item.split('|')
							let obj = {
								url: a1[0],
								time: a1[1],
								playing: false,
							}
							vArr.push(obj)
						})
						post.voiceArr = vArr
					}
				})
			}
			aanlist.value = res.data.aanlist || []
			postDetail.value = res.data
			loading.value = false
			postDetail.value
			if (postDetail.value.sdes == 1) {
				getCardList()
			}
		})
	}

	const getCardList = () => {
		const opt = {
			"poss.id": postId.value
		}
		communityApi.getPossTarotlistatPid(opt).then(res => {
			// console.log(res)
			cardList.value = res.data
		})
	}
	const playAudio = (val, idx) => {
		if (val.playing) {
			audioCtx.value.stop();
			val.playing = false
			audioCtx.value = null
		} else {
			val.playing = true
			audioCtx.value = uni.createInnerAudioContext();
			audioCtx.value.src = val.url; // 在线音频地址
			console.log(audioCtx.value.src);
			audioCtx.value.play();
			audioCtx.value.onEnded((res) => {
				val.playing = false
			})
		}
	}
	// 跳转星盘
	const onAstrolabe = () => {
		const idsArr = postDetail.value.selcard.split(',')
		uni.navigateTo({
			url: `/pages/test/astrolabe?tab=${idsArr.length>1?0:4}&ids=${postDetail.value.selcard}`
		})
	}
	const handleKeyWord = () => {
		showKeyWord.value = !showKeyWord.value
	}
	const handleGoUser = (router, id, ach) => {
		if (ach == 1) {
			const anchorId = uni.getStorageSync("anchor").id
			if (anchorId != id) {
				onPath(router)
			}
		} else {
			const userId = uni.getStorageSync("user").id
			if (userId != id) {
				onPath(router)
			}
		}
	}
	const onPath = (router) => {
		uni.navigateTo({
			url: router
		})
	}
</script>

<style lang="scss" scoped>
	.box-problem {

		.flex-top {
			background: url('/static/user/bg_top.png') no-repeat;
			background-size: cover;
			height: 258rpx;
		}

		.flex-middle {
			background: url('/static/user/bg_middle.png') repeat-y;
			background-size: contain;
		}

		.flex-bottom {
			background: url('/static/user/bg_bottom.png') no-repeat;
			background-size: cover;
			height: 42rpx;
		}

		.problem {
			background: #FFEFE2;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx;

			text>text {
				font-weight: 500;
				font-size: 24rpx;
				color: #3B4C52;
			}
		}

		.card-dashed {
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx dashed #8DC2D3;

			image {
				width: 180rpx;
			}
		}

		.box-year {
			background: #E3EDFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #B4CCF7;
			font-weight: 400;
			font-size: 26rpx;
			color: #4370C1;
			line-height: 26rpx;
			padding: 10rpx;
		}

		.box-birthday {
			background: #F2ECFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #E2D4FF;
			font-weight: 400;
			font-size: 26rpx;
			color: #634A97;
			line-height: 26rpx;
			padding: 10rpx;
		}

		.box-gender {
			background: #FFE7D6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #FFD8BB;
			font-weight: 400;
			font-size: 26rpx;
			color: #C3743B;
			line-height: 26rpx;
			padding: 10rpx;
		}

		.choose-num {
			background: #E0F0FF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #C8E5FF;
			font-size: 32rpx;
			color: #329EFF;
			line-height: 32rpx;
			padding: 10rpx;
		}
	}

	.box-pay {
		background: #BBE4FF;
		box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(32, 121, 202, 0.4);
		border-radius: 120rpx 120rpx 120rpx 120rpx;

		.text-pay {
			font-weight: 400;
			font-size: 32rpx;
			color: #3A5970;
			line-height: 32rpx;
		}

		.pay-num {
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 28rpx;
		}
	}

	.box-card {
		width: 180rpx;
		height: 315.27rpx;
	}

	.line {
		border-bottom: 2rpx dashed #ccc;
	}

	.icon-voice {
		animation-name: voiceExample;
		/* 引用上面定义的@keyframes */
		animation-duration: 3s;
		/* 动画持续时间 */
		animation-iteration-count: infinite;
		/* 无限循环 */
		background: url(/static/user/icon_voice1.png) no-repeat;
		background-size: contain;
		width: 28rpx;
		height: 30rpx;
	}

	@keyframes voiceExample {
		0% {
			background: url(/static/user/icon_voice1.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		50% {
			background: url(/static/user/icon_voice2.png) no-repeat;
			background-size: contain;
			width: 28rpx;
			height: 30rpx;
		}

		100% {
			background: url(/static/user/icon_voice3.png) no-repeat;
			background-size: cover;
			width: 28rpx;
			height: 30rpx;
		}
	}
</style>